<%@ page pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <c:url var="base" value="/"/>
    <base href="${base}">
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        .blank{
            height: 30px;
        }
        body{
            background-image: url("images/background2.jpg");
            background-repeat: repeat;
        }
        .modal{
            width: 500px;
            position: absolute;
            top:30%;
            left:50%;
            transform: translate(-50%,-50%);
            border: 2px #000000 solid;
            border-radius: 10px;
            padding:10px;
            background-color: #def6ff;
            box-shadow: 10px 10px 10px 10px #434446;
        }
        .modal-dialog{
            margin: auto;
        }
        input[type="password"],[type="text"]{
            border-radius: 5px;
            padding:5px;
            width: 90%;
        }
        .form-group{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .form-label{
            font-size: 20px;
            font-weight: 600;
            text-align:right;
            flex-basis: 15%;
            padding:10px;
        }
        .form-input{
            flex-basis: 85%;
            padding:10px;
        }
        .button{
            text-align: center;
        }
        .btn {
            display: inline-block;
            background-color: #ff7568;
            color: #6b7372;
            font-size: 17px;
            padding: 5px 15px;
            text-decoration: none;
            border-radius: 5px;
            margin: 0 50px;
        }
        .btn:hover{
            background-color: #617581;
            color: white;
        }
        .submit{
            background-color: #98c1ff;
        }
        .title{
            text-align: center;
            font-size: 30px;
            font-weight: 600;
        }
    </style>
</head>
<body>
<div class="modal">
    <div class="modal-dialog data-dismiss">
        <form action="login" method="post" id="log">
            <div class="title">登&nbsp&nbsp&nbsp录</div>
            <div class="form-group">
                <label class="form-label">用户名</label>
                <div class="form-input"><input type="text" name="username" required placeholder="请输入用户名（可用：admin）"></div>
            </div>
            <div class="form-group">
                <label class="form-label">密码</label>
                <div class="form-input"><input type="password" name="password" required placeholder="请输入密码（可用：admin）"></div>
            </div>
            <div class="blank"></div>
            <div class="button">
                <button class="btn submit" type="submit">提交</button>
                <input class="btn" type="button" value="取消" onclick="fun1()">
            </div>
        </form>
    </div>
</div>
<script>
    function fun1()
    {
        window.location.href="index";
    }
</script>
</body>
</html>